<template>
	<div class="top" v-if="hidden">
	 <div class="top_top">
     <Icon type="android-share-alt"></Icon>
      </div>
      <div class="top_center">
      	 <Input v-model="value4" icon="search"  placeholder=" ..." style="width: 200px"></Input>
      </div>
      <div class="top_right">
        <Button type="primary" @click="modal1 = true">笔记本</Button>
        <Modal style="text-align: center"
          v-model="modal1"
          title="这是一个记录框，在这你可以记录你想记录的问题"
          @on-ok="ok"
          @on-cancel="cancel">
          <p>你的问题：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
          <p>你的思路：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p></p>
          <p>解决方法：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p></p>
        </Modal>
      </div>

	</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data(){
		return {
			value4:'',
      modal1: false
		}
	},
	computed:{
		...mapState(['hidden','top_list']),

	},
	created(){
    this.getrouter();
	},
	methods:{
    getrouter(){
		this.showrouter = this.$route.path.split('/');
		    console.log(this.showrouter.length);
        if(this.showrouter.length == 3)
        {this.$store.commit('Tophidden')}
        else
        {this.$store.commit('Tophidden2')}
       },
      ok () {
        this.$Message.info('点击了确定');
      },
      cancel () {
        this.$Message.info('点击了取消');
      }
	},
    watch:{
	 "$route":"getrouter"
	}
}
</script>

<style scoped>
   .top{ font-size: 20px;overflow: hidden;}
   .top_top{width: 10%;float: left;font-size: 30px;margin-top: -7px;text-align:left;}
   .top_center{width: 70%;float: left;text-align: center;line-height: 31px;}
   .top_right{width: 20%;float: left;text-align: right;line-height: 31px;}
</style>
